<template>
	<view class="news">
		<view class="input">
			<input type="text" placeholder="搜索关键字">
			<image src="https://s1.ax1x.com/2022/11/23/z8PVMT.png" mode=""></image>
		</view>
		<view class="list" v-for="item in newsdata" :key="item.id">
			<view class="left">
				<text class="name">{{item.title}}</text>
				<text class="item">{{item.addtime}}</text>
			</view>
			<view class="right">
				<image v-if="!item.picture" src="https://s1.ax1x.com/2022/11/22/z1n5Hf.jpg" mode=""></image>
				<image v-else :src="IMGURL+item.picture" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {newslist} from '../utils/api.js'
	import {IMG} from '../utils/cofing.js'	
	export default{
		data(){
			return{
				token: uni.getStorageSync("token"),
				newsdata:[],
				query:{
					page:1,
					psize:40,
				},
				IMGURL:IMG,
				counts:0
			}
		},
		created(){
			if(!this.token){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			}
			this.getnewslist()
		},
		methods:{
			async getnewslist(){
				uni.showToast({
					title:"加载中",
					icon:'loading',
				})
				let res = await newslist(this.query)
				console.log(res);
				if(res.errCode==10000){
					this.newsdata =[...this.newsdata,...res.data.list.filter(item=>{
						return item.type === 2
					})]
					this.counts = res.data.counts
					uni.hideToast()
				}
				uni.stopPullDownRefresh()
			},
		},
		onPullDownRefresh(){
			this.query.page = 1
			this.newsdata = []
			this.getnewslist()
		},
		onReachBottom(){
			this.query.page++
			this.getnewslist()
			if(this.query.page * this.query.psize >=this.counts){
				return uni.showToast({
					title:'数据加载完毕'
				})
			}
		}
	}
</script>
	
<style lang="less" scoped>
	.input{
		width: 730rpx;
		height: 172rpx;
		position: relative;
		margin-left: 30rpx;
		margin-top: 25rpx;
		input{
			width: 617rpx;
			height: 82rpx;
			font-size: 24rpx;
			border-radius: 50rpx;
			background-color: #f4f6f6;
			padding: 0 35rpx;
		}
		image{
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			top: 26rpx;
			right: 70rpx;
		}
	}
	.list{
		width: 730rpx;
		height: 217rpx;
		margin-left: 10rpx;
		display: flex;
		.right{
			width: 245rpx;
			height: 165rpx;
			image{
				width: 245rpx;
				height: 165rpx;
				border-radius: 15rpx;
				margin-top: 32rpx;
				margin-left: 60rpx;
			}
		}
		.left{
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			.name{
				margin-top: 32rpx;
				margin-left: 25rpx;
				width: 372rpx;
				font-size: 28rpx;
			}
			.item{
				margin-left: 25rpx;
				margin-top: 72rpx;
				color: #afafaf;
				font-size: 20rpx;
			}
		}
	}
</style>